<!--
 * @Author: liangzhuo liangzhuo@chzu.com
 * @Date: 2022-10-24 16:11:27
 * @LastEditors: liangzhuo liangzhuo@chzu.com
 * @LastEditTime: 2022-10-30 15:20:01
 * @FilePath: \hongxinUi\src\views\exam\generatePaper\index.vue
 * @Description: 生成考试试卷
-->
<template>
  <div>
    <!-- 头部输入框 -->
    <el-form :model="paperInfo" style="margin: 10px 10px;" size="small"
     :inline="true">
      <el-form-item label="试卷名">
        <el-input
          v-model="paperInfo.paperName"
          placeholder="请输入试卷名称"
          size="small"
          style="width: 240px"
        ></el-input>
      </el-form-item>
      <el-form-item label="试卷开始-截止时间">
        <el-date-picker
          v-model="paperInfo.paperTime"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          v-show="!generateButtonDissable"
          type="primary"
          icon="el-icon-document-checked"
          size="mini"
          @click="generatePaper"
          >生成试卷</el-button
        >
        <el-button
          v-show="generateButtonDissable"
          type="primary"
          size="mini"
          :disabled="generateButtonDissable"
          ><span style="color: red;">{{countDown}}s后再操作</span></el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="handleRefresh"
          >重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 各类型题型个数 -->
    <el-row :gutter="20" class="question_count">
      <el-col :span="4" :offset="1" >
        <i class="el-icon-document-copy"></i>
        填空题个数：<span style="color: red">{{inputSelection.length}}</span>
      </el-col>
      <el-col :span="4">
        <i class="el-icon-document-copy"></i>
        判断题个数：<span style="color: red">{{judgeSelection.length}}</span>
      </el-col>
      <el-col :span="4">
        <i class="el-icon-document-copy"></i>
        单选题个数：<span style="color: red">{{schooseSelection.length}}</span>
      </el-col>
      <el-col :span="4">
        <i class="el-icon-document-copy"></i>
        多选题个数：<span style="color: red">{{mchooseSelection.length}}</span>
      </el-col>
    </el-row>

    <!--四大试题类型-->
    <div class="four_div">
      <div>
        <span>
          <i class="el-icon-document"></i>
          填空题
        </span>
        <inputQuestionsTable @inputSelection="getChildreninputSelection"/>
      </div>
      <div>
        <span>
          <i class="el-icon-document"></i>
          判断题
        </span>
        <judgeQuestionsTable @judgeSelection="getChildrenjudgeSelection"/>
      </div>
      <div>
        <span>
          <i class="el-icon-document"></i>
          单选题
        </span>
        <schooseQuestionsTable @schooseSelection="getChildrenschooseSelection"/>
      </div>
      <div>
        <span>
          <i class="el-icon-document"></i>
          多选题
        </span>
        <mchooseQuestionsTable @mchooseSelection="getChildrenmchooseSelection"/>
      </div>
    </div>
  </div>
</template>

<script>
import inputQuestionsTable from '@/views/exam/input/index'
import judgeQuestionsTable from '@/views/exam/judge/index'
import mchooseQuestionsTable from '@/views/exam/mchoose/index'
import schooseQuestionsTable from '@/views/exam/schoose/index'
import {addExamPapaer} from '@/api/exam/paperInfo'
import {formatDate} from '@/utils/dateUtil'
export default {
  name: 'HongxinUiIndex',
  components: {inputQuestionsTable, judgeQuestionsTable, mchooseQuestionsTable, schooseQuestionsTable},
  data() {
    return {
      paperInfo: {},
      multipleSelection: [], // 总的选择的类型
      inputSelection: [],
      judgeSelection: [],
      schooseSelection: [],
      mchooseSelection: [],
      generateButtonDissable: false,
      timer: "",
      countDown: 0
    };
  },

  created() {
    this.$store.commit('SET_IS_SHOW', false)
  },

  beforeDestroy() {
    this.$store.commit('SET_IS_SHOW', true)
    // 销毁定时器
    clearInterval(this.timer);
  },

  methods: {
    generatePaper() {
      this.multipleSelection = []
      this.multipleSelection = this.multipleSelection
                                .concat(this.inputSelection)
                                .concat(this.judgeSelection)
                                .concat(this.schooseSelection)
                                .concat(this.mchooseSelection)
      if (this.paperInfo.paperName == undefined || this.paperInfo.paperName == '') {
        return this.$message({
              type: 'warning',
              message: '请输入试卷名/(ㄒoㄒ)/~~'
            })
      }
      if (this.paperInfo.paperTime === undefined || this.paperInfo.paperTime === null) {
        return this.$message({
              type: 'warning',
              message: '请选择试卷考试日期范围/(ㄒoㄒ)/~~'
            })
      }
      // 大的对象
      let dataObj = {}
      // 试卷基本信息对象
      let paperInfoObj= {
        paperName: this.paperInfo.paperName,
        inputCount: this.inputSelection.length,
        judgeCount: this.judgeSelection.length,
        mchooseCount: this.mchooseSelection.length,
        schooseCount: this.schooseSelection.length,
        paperTime: formatDate(this.paperInfo.paperTime[0], "yyyy-MM-dd hh:mm:ss"),
        paperEndTime: formatDate(this.paperInfo.paperTime[1], "yyyy-MM-dd hh:mm:ss")
      }
      // 各试题选择情况的对象
      let questionsVoList = this.multipleSelection
      // 汇总
      dataObj.paperInfo = paperInfoObj
      dataObj.questionsVoList = questionsVoList
      this.$modal
      .confirm('是否确认生成试卷？')
      .then(() => {
        return addExamPapaer(dataObj).then(res => {
          this.$message({
            type: 'success',
            message: "创建试卷信息成功(*^_^*)"
          })
        }).catch(() => {
          this.$message.error("创建试卷信息失败/(ㄒoㄒ)/~~")
        })
      })
      .then(() => {
        // 开启定时器
        this.startTime()
      })
      
    },
    // 点击生成试卷按钮后会禁用一段时间
    startTime(){
      this.generateButtonDissable = true
      this.countDown = 10; 
      this.timer = setInterval(() => {
        this.countDown--; 
        // 必须清除定时器
        if (this.countDown <= 0) {
          this.generateButtonDissable = false
          clearInterval(this.timer);
        }
      }, 1000);
    },
    // 重置
    handleRefresh() {
      this.paperInfo = {}
      this.paperInfo.paperTime = []
      this.multipleSelection = []
      this.inputSelection = []
      this.judgeSelection = []
      this.schooseSelection = []
      this.mchooseSelection = []
      // 各组件对设置的该值进行监听，如有变动则清除所勾选的试题
      this.$store.commit('SET_NO_ALL_SELECTION', [])
    },
    // 选择的填空题
    getChildreninputSelection(val) {
      this.inputSelection = []
      val.forEach(item => {
        // (1填空 2判断 3单选 4多选)
        this.inputSelection.push({
          questionId: item.id,
          questionType: '1'
        })
      });
    },
    // 选择的判断题
    getChildrenjudgeSelection(val) {
      this.judgeSelection = []
      val.forEach(item => {
        // (1填空 2判断 3单选 4多选)
        this.judgeSelection.push({
          questionId: item.id,
          questionType: '2'
        })
      });
    },
    // 单选题
    getChildrenschooseSelection(val) {
      this.schooseSelection = []
      val.forEach(item => {
        // (1填空 2判断 3单选 4多选)
        this.schooseSelection.push({
          questionId: item.id,
          questionType: '3'
        })
      });
    },
    // 多选题
    getChildrenmchooseSelection(val) {
      this.mchooseSelection = []
      val.forEach(item => {
        // (1填空 2判断 3单选 4多选)
        this.mchooseSelection.push({
          questionId: item.id,
          questionType: '4'
        })
      });
    }
  },
};
</script>

<style lang="scss" scoped>
// .four_div {
//   display: flex;
//   align-items: center;
//   justify-content: flex-start;
//   flex-wrap: wrap;
//   width: 100%;
//   height: 1880px;
// }
// .four_div div {
//   margin: 15px 6px;
//   width: 48%;
//   height: 50%;
//   overflow-y: scroll;
// }
.four_div div span {
  margin: 5% 45%;
  font-weight: bold;
  font-size: 18px;
  color:#F56C6C;
}
.question_count {
  margin: 2% 0;
  font-weight: bold;
  font-size: 16px;
}
</style>